<%--
  Created by IntelliJ IDEA.
  User: zyxna
  Date: 2020/8/24
  Time: 17:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    html,body{
        height: 100%;
        width: 100%;;
        background-color: #f2f2f2;
    }
    @import url(https://fonts.googleapis.com/css?family=Khula:700);
    .hidden {
        opacity: 0;
    }

    .console-container {
        font-family: 宋体;
        font-size: 23px;
        float: left;
        height: 40px;
        width: 200px;
        display: block;
        color: white;
    }
    .console-underscore {
        display: inline-block;
        position: relative;
        top: -0.14em;
        left: 10px;
    }
    #fade {    /*遮罩层*/
      display:none;  /* 元素不可见*/
      position:absolute;  /*绝对定位*/
      top:0%;
      left:0%;
      width:100%;
      height:100%;
      background-color:black;
      z-index:1;  /*元素的堆叠顺序*/
      -moz-opacity:0.3;
      opacity:.3;   /*透明度*/
      filter:alpha(opacity=3);
    }
    #light{
        display:none;
        position:absolute;
        width:400px;
        top:50%;
        left:50%;
        margin:-220px 0 0 -200px;
        padding:0px;
        background-color:white;
        z-index:2;
        overflow:auto;
        border-radius: 5px;
    }
    #dv1{
        background-color: #3a3a3a;
        height: 60px;
        color: white;
        font-size: 18px;
        line-height: 60px;
    }
    #dv2{
        border-bottom: 1px solid gainsboro;
    }
    #dv3{
        text-align: center;
        padding-top: 7px;
    }
    .addForm{
        padding-top: 30px;
        text-align: center;
        font-size: 100%;
    }
    input,select{height: 40px; width: 270px;font-size: 90%}
    label{display: block;padding: 10px }
    .btn{ height: 35px; width: 70px;border: 0px; font-size: 100%;}
    #OKbt{background-color: #64b8f9; color: white}
    #openbt{
        border: none;
    }

</style>
<body>

<!--上导航栏-->
<div style="background-color: #3a3a3a;height: 54px;text-align: center;padding-top: 10px;">
    <!-- 自定义动态图片 -->
    <div class='console-container'><span id='text'></span>
        <div class='console-underscore' id='console'>_</div>
    </div>
    <!-- 退出登录 -->
    <button id="delsession" type="button" class="btn btn-default" style="float: right;margin-right: 50px;height: 25px;font-size: 12px;width: 80p;margin-top:5px;text-align: center;line-height:13px;">退出登录</button>
    <!-- 个人信息 -->
    <div class="dropdown" style="margin-left: 60px; float: right;width: 10%;">
        <span style="background-color: red;width: 80%;height: 25px;"></span>
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="height: 25px;font-size: 12px;line-height:13px;width: 80px;text-align: center;margin-top: 5px;">
            个人信息
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li>
                <a href="#" class="glyphicon" style="color: grey;">
                    <span class="glyphicon-user" style="margin-left: -10px;"></span>
                    基本设置
                </a>
            </li>
            <li role="separator" class="divider"></li>
            <li>
                <input type="button" style="margin-left: 20px;border: none" value="修改密码">
                <%--<button id="openbt" style="margin-left: 20px;border: none">修改密码</button>--%>
            </li>
        </ul>
    </div>
</div>

<!--左右页面布局-->
<div style="height: 91%;">

    <% int rightPeop=(int)request.getAttribute("rightPeop");%>

    <%if(rightPeop==1){%>
    <iframe src="leftFrame.jsp" width="15%" height="100%" style="float: left;" scrolling="no" frameborder="0"></iframe>
    <%}else if(rightPeop==2){%>
    <iframe src="leftFrame2.jsp" width="15%" height="100%" style="float: left;" scrolling="no" frameborder="0"></iframe>
    <%}else if(rightPeop==3){%>
    <iframe src="leftFrame3.jsp" width="15%" height="100%" style="float: left;" scrolling="no" frameborder="0"></iframe>
    <%}%>

    <% int navId=(int)request.getAttribute("navId");%>
    <%if(navId==1){%>
        <iframe src="InforPerfectServlet?method=InfoFind"  width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}else if(navId==2){%>
        <iframe src="RepertoryServlet?method=ReperAllFind" width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}else if(navId==3){%>
        <iframe src="merchServlet?method=merchSelect"  width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}else if(navId==4){%>
        <iframe src="supplierServlet?method=supplierSelect"  width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}else if(navId==5){%>
        <iframe src="attendanceServlet?method=attFind"  width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}else if(navId==6){%>
        <iframe src="MerTypeServlet?method=MerTypeSelect"  width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}else if(navId==7){%>
        <iframe src="merchXiaoshouServlet?method=xiaoshouSelect"  width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}else if(navId==8){%>
        <iframe src="permissionsServlet?method=PermissionFind"  width="85%" height="100%"  style="float: left;padding: 20px 20px 20px 20px;" frameborder="0" name="test"></iframe>
    <%}
    %>


</div>


<div id="light">
    <div id="dv1" name="head"><span style="margin-left: 30px">修改密码</span></div>

    <form action="passwordUpdate" method="post" class="addForm">
        <div id="dv2" name="body" style="padding-bottom: 30px;">
            <label>
                旧密码:&nbsp;<input type="password" name="oldPassword" placeholder="请输入旧密码" >
            </label>
            <label>
                新密码:&nbsp;<input type="password" name="newPassword" placeholder="请输入新密码" >
            </label>
        </div>
        <div id="dv3" name="foot" style="padding-bottom: 7px;">
            <button type="sumbit" id="OKbt1" class="btn" style="background-color: dodgerblue;color: white;">确&nbsp;&nbsp;认</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="reset" id="closebt1" class="btn" >取&nbsp;&nbsp;消</button>
        </div>
    </form>
</div>
<div id="fade"></div>


</body>


<script type="text/javascript">
    // function([string1, string2],target id,[color1,color2])
    //			动态字体设置
    consoleText(['超市管理系统', '欢迎登录', 'Welcome'], 'text', ['tomato', 'rebeccapurple', 'lightblue']);

    function consoleText(words, id, colors) {
        if (colors === undefined) colors = ['#fff'];
        var visible = true;
        var con = document.getElementById('console');
        var letterCount = 1;
        var x = 1;
        var waiting = false;
        var target = document.getElementById(id)
        target.setAttribute('style', 'color:' + colors[0])
        window.setInterval(function() {

            if (letterCount === 0 && waiting === false) {
                waiting = true;
                target.innerHTML = words[0].substring(0, letterCount)
                window.setTimeout(function() {
                    var usedColor = colors.shift();
                    colors.push(usedColor);
                    var usedWord = words.shift();
                    words.push(usedWord);
                    x = 1;
                    target.setAttribute('style', 'color:' + colors[0])
                    letterCount += x;
                    waiting = false;
                }, 1000)
            } else if (letterCount === words[0].length + 1 && waiting === false) {
                waiting = true;
                window.setTimeout(function() {
                    x = -1;
                    letterCount += x;
                    waiting = false;
                }, 1000)
            } else if (waiting === false) {
                target.innerHTML = words[0].substring(0, letterCount)
                letterCount += x;
            }
        }, 120)
        window.setInterval(function() {
            if (visible === true) {
                con.className = 'console-underscore hidden'
                visible = false;

            } else {
                con.className = 'console-underscore'

                visible = true;
            }
        }, 400)
    }




    window.onload=function(){
        var linkbt=document.getElementById("openbt");
        var light=document.getElementById('light');
        var fade=document.getElementById('fade');
        var dv1=document.getElementById('dv1');
        var closebt=document.getElementById("closebt");
        var OKbt=document.getElementById('OKbt');
        linkbt.onclick=function(){
            light.style.display='block';
            fade.style.display='block';
        }
        closebt.onclick=function(){
            light.style.display='none';
            fade.style.display='none';
        }
        OKbt.onclick=function () {
            light.style.display='none';
            fade.style.display='none';
        }
    }
    var del = document.getElementById("delsession");
    del.onclick=function () {

        window.location.href='delSession'
    }
</script>
</html>

